<script setup>
import {userStore} from '@pi/user';
import {emigrationStore} from '@pi/emigration';
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {baseURL, model, msg, removeCookies} from "@ut/tool.js";

let user = userStore();
let emigration = emigrationStore();
let role = reactive(['管理员', '宿管员', '学生']);
let router = useRouter();
let info = reactive({
    show: false,
    loading: false,
    form: {},
    rules: {
        nickname: {required: true, message: '请输入昵称', trigger: 'blur'},
        gender: {required: true, message: '请选择性别', trigger: 'change'},
        phone: {required: true, message: '请输入手机号', trigger: 'blur'}
    },
    open() {
        info.show = true;
        info.form = {...user.info};
    },
    close() {
        info.show = false;
        info.loading = false;
        formRef.value.resetFields();
    }
});
let formRef = ref(null);
let pass = reactive({
    show: false,
    loading: false,
    form: {},
    rules: {
        password: {required: true, message: '请输入旧密码', trigger: 'blur'},
        newPassword: {required: true, message: '请输入新密码', trigger: 'blur'},
    },
    open() {
        pass.show = true;
        pass.form = {id: user.info.id};
    },
    close() {
        pass.show = false;
        pass.loading = false;
        passRef.value.resetFields();
    }
});
let passRef = ref(null);
let emig = reactive({
    show: false,
    loading: false,
    form: {},
    rules: {
        content: {required: true, message: '请输入迁移原因', trigger: 'blur'},
    },
    open() {
        emig.show = true;
        emig.form = {uid: user.info.id};
    },
    close() {
        emig.show = false;
        emig.loading = false;
        emigRef.value.resetFields();
    }
})
let emigRef = ref(null);

// 修改信息
function editInfo() {
    formRef.value.validate(async e => {
        if (e) {
            info.loading = true;
            await user.update(info.form);
            info.close();
            user.getInfo();
        }
    })
}

// 文件上传成功
function upSuccess({data}) {
    emig.form.file = data;
}

// 申请迁出
function emigSubmit() {
    emigRef.value.validate(async e => {
        if (e) {
            emig.loading = true;
            await emigration.create(emig.form);
            emig.close();
        }
    })
}

// 重置密码
function editPass() {
    passRef.value.validate(async e => {
        if (e) {
            pass.loading = true;
            await user.updatePassword(pass.form);
            pass.close();
            await model('成功', '密码重置成功，请重新登录', 'success', false);
            removeCookies('userInfo');
            router.replace({path: '/login'});
        }
    })
}

// 退出登录
function logout() {
    model('提示', '正在退出系统，是否继续？', 'warning').then(e => {
        if (e) {
            msg('退出成功');
            removeCookies('userInfo');
            router.replace({path: '/login'});
        }
    })
}
</script>

<template>
    <h5 class="title">个人中心</h5>
    <el-descriptions :column="1" style="margin-top: 30px;">
        <el-descriptions-item label="当前用户">{{user.info.nickname}}</el-descriptions-item>
        <el-descriptions-item label="账号">{{user.info.account}}</el-descriptions-item>
        <el-descriptions-item label="角色">
            <el-tag size="small">{{role[user.info.role]}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="手机号">{{user.info.phone}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{user.info.gender}}</el-descriptions-item>
        <template v-if="user.info.role === 2">
            <el-descriptions-item label="楼号">{{user.info.building.label}}</el-descriptions-item>
            <el-descriptions-item label="寝室号">{{user.info.chamber.label}}</el-descriptions-item>
        </template>
    </el-descriptions>
    <el-button type="primary" size="small" plain @click="info.open">修改信息</el-button>
    <el-button type="success" size="small" plain @click="emig.open" v-if="user.info.role === 2">申请迁出</el-button>
    <el-button type="warning" size="small" plain @click="pass.open">修改密码</el-button>
    <el-button type="danger" size="small" plain @click="logout">退出登录</el-button>

    <el-dialog title="修改信息" v-model="info.show" width="600px" @close="info.close" draggable>
        <el-form ref="formRef" :model="info.form" :rules="info.rules" v-loading="info.loading" label-width="80px">
            <el-form-item label="姓名" prop="nickname">
                <el-input v-model="info.form.nickname" disabled placeholder="请输入姓名" :maxlength="32" clearable />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="info.form.gender" disabled>
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="info.form.phone" placeholder="请输入手机号" :maxlength="16" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="editInfo">保存</el-button>
            <el-button @click="info.close">取消</el-button>
        </template>
    </el-dialog>

    <el-dialog title="重置密码" v-model="pass.show" width="600px" @close="pass.close" draggable>
        <el-form ref="passRef" :model="pass.form" :rules="pass.rules" v-loading="pass.loading" label-width="80px">
            <el-form-item label="旧密码" prop="password">
                <el-input v-model="pass.form.password" type="password" :maxlength="32" show-password placeholder="请输入旧密码"/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="pass.form.newPassword" type="password" :maxlength="32" show-password placeholder="请输入新密码"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="editPass">保存</el-button>
            <el-button @click="pass.close">取消</el-button>
        </template>
    </el-dialog>

    <el-dialog title="申请迁出" v-model="emig.show" width="600px" @close="emig.close" draggable>
        <el-form ref="emigRef" :model="emig.form" :rules="emig.rules" v-loading="emig.loading" label-width="80px">
            <el-form-item label="迁出原因" prop="content">
                <el-input v-model="emig.form.content" type="textarea" :rows="6" placeholder="请输入迁出原因"/>
            </el-form-item>
            <el-form-item label="附件">
                <el-upload drag :action="baseURL + '/file/up'" :data="{type: 'file'}" :limit="1"  multiple :on-success="upSuccess" style="width: 100%;">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">拖拽或 <em>点击上传文件</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="emigSubmit">保存</el-button>
            <el-button @click="pass.close">取消</el-button>
        </template>
    </el-dialog>
</template>

<style scoped lang="less">

</style>